<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListRobotResDto"
      :searchParams="searchParams"
      :serial="true"
      :select="true"
      :handleDisable="handleDisable"
    >
      <template #select>
        <el-table-column type="selection" width="55" :selectable="selectable" />
      </template>
      <el-table-column prop="managerName" label="机器人名称" width="100" />
      <el-table-column prop="wxRobotId" label="唯一标识" width="100" />
      <el-table-column prop="wxId" label="微信ID" width="100" />
      <el-table-column
        prop="wxGroupDtoList"
        label="管理微信群（请到微信群管理设置关联）"
        minWidth="160"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.wxGroupDtoList?.map((e) => e.wxGroupName)?.join('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="managerDtoList"
        label="关联网格经理（请到微信群管理设置关联）"
        minWidth="180"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.managerDtoList?.map((e) => e.managerName)?.join('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="relationWxUserNum"
        label="微信好友数量"
        width="100"
      >
        <template #default="scope">
          <el-link
            v-if="scope.row.relationWxUserNum > 0"
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="showPersonDetail(scope.row)"
            >{{ scope.row.relationWxUserNum }}</el-link
          >
          <span v-else>{{ scope.row.relationWxUserNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <Tooltip :text="scope.row.remark"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" minWidth="100">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
            :sortTablekey="sortTablekey"
            @click="sortTablekey = 1"
            :handleSearch="handleSearch"
          ></SortTable>
        </template>
      </el-table-column>
      <el-table-column prop="robotState" label="机器人状态" minWidth="150">
        <template #default="scope">
          <div
            :style="{
              color: scope.row.robotState == 1 ? '#70b603fe' : '#d9001bfe',
            }"
          >
            {{ getRobotState(scope.row.robotState) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="isDisable" label="启用状态" width="90">
        <template #default="scope">
          <isDisableStatus :status="scope.row.isDisable"></isDisableStatus>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="170">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >

          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >标签设置</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import openMsgBox from '@/hooks/messageBox.js'
import { basicConfigService } from '@/api/basicConfig'
import { getRobotState } from '@/hooks/getStateName'
const formItems = ref([
  {
    name: '微信号',
    key: 'wxNumber',
    type: 'input',
  },
  {
    name: '微信昵称',
    key: 'wxRobotId',
    type: 'input',
  },
  {
    name: '微信备注',
    key: 'wxId',
    type: 'input',
  },

  {
    name: '微信电话',
    key: 'wxId',
    type: 'input',
  },
  {
    name: '姓名',
    key: 'wxId',
    type: 'input',
  },
  {
    name: '家庭地址',
    key: 'wxId',
    type: 'input',
  },
  {
    name: '标签',
    key: 'labels',
    type: 'label',
    selecedList: [],

    tagType: 1, //1：用户标签
  },
])
const searchParams = ref({
  managerName: '',
  wxRobotId: '',
  wxId: '',
  isNormal: '',
  date: '',
  labels: [],
})
const selectable = (row, index) => {
  return row.robotState == 1
}
const baseTable = ref(null)
const sortTablekey = ref(1)
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  })
}
const showPersonDetail = (row) => {}
const item = ref({})
const visibleEditForm = ref(false)
const handleEdit = (row) => {
  item.value = { ...row }
  visibleEditForm.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.robotBatchDel({ data: [row.managerId] })
    },
    () => {
      handleSearch()
    }
  )
}

const handleDisable = (row, rows = []) => {
  let isDisable = row.isDisable || row
  let ids = row.managerId ? [row.managerId] : rows.map((e) => e.managerId)
  openMsgBox(
    {
      tips: `是否确定${isDisable == 1 ? '启用' : '停用'}?`,
    },
    () => {
      if (isDisable == 1) {
        return basicConfigService.robotEnableBatch({
          data: ids,
        })
      } else {
        return basicConfigService.robotDisableBatch({
          data: ids,
        })
      }
    },
    () => {
      handleSearch()
    }
  )
}
</script>

<style lang="less" scoped></style>
